import { Attachments, Prompts, Sender } from '@/components';
import { Badge, Button } from 'antd';
import { CloudUploadOutlined, PaperClipOutlined } from '@ant-design/icons';
import React from 'react';
import { senderPromptsItems } from '../constants';
import type { GetProp } from 'antd';

/**
 * ChatInput 组件的属性接口
 */
export interface ChatInputProps {
  /** 输入框的内容 */
  content: string;
  /** 是否处于加载状态 */
  loading?: boolean;
  /** 附件面板是否打开 */
  headerOpen?: boolean;
  /** 已上传的文件列表 */
  attachedFiles: GetProp<typeof Attachments, 'items'>;
  /** 提交消息的回调 */
  onSubmit: (content: string) => void;
  /** 内容变化的回调 */
  onChange: (content: string) => void;
  /** 附件面板开关状态变化的回调 */
  onHeaderOpenChange: (open: boolean) => void;
  /** 文件变更的回调 */
  onFileChange: GetProp<typeof Attachments, 'onChange'>;
  /** 提示词点击的回调 */
  onPromptsItemClick?: GetProp<typeof Prompts, 'onItemClick'>;
  /** 自定义类名 */
  className?: string;
}

/**
 * 聊天输入框组件
 * 
 * @component
 * @description
 * 提供聊天界面的输入功能，包括：
 * 1. 文本输入
 * 2. 文件上传
 * 3. 提示词选择
 * 
 * 特点：
 * - 支持文件上传和预览
 * - 支持提示词快捷输入
 * - 支持加载状态显示
 * - 支持自定义样式
 * 
 * @example
 * ```tsx
 * <ChatInput
 *   content={content}
 *   loading={loading}
 *   onSubmit={handleSubmit}
 *   onChange={handleChange}
 * />
 * ```
 */
export const ChatInput: React.FC<ChatInputProps> = ({
  content,
  loading,
  headerOpen,
  attachedFiles,
  onSubmit,
  onChange,
  onHeaderOpenChange,
  onFileChange,
  // onPromptsItemClick,
  className,
}) => {
  /**
   * 附件按钮节点
   * 包含未读提示和点击事件
   */
  const attachmentsNode = (
    <Badge dot={attachedFiles.length > 0 && !headerOpen}>
      <Button
        type="text"
        icon={<PaperClipOutlined />}
        onClick={() => onHeaderOpenChange(!headerOpen)}
      />
    </Badge>
  );

  /**
   * 附件面板头部
   * 包含文件上传和预览功能
   */
  const senderHeader = (
    <Sender.Header
      title="Attachments"
      open={headerOpen}
      onOpenChange={onHeaderOpenChange}
      styles={{
        content: {
          padding: 0,
        },
      }}
    >
      <Attachments
        beforeUpload={() => false}
        items={attachedFiles}
        onChange={onFileChange}
        placeholder={(type) =>
          type === 'drop'
            ? { title: 'Drop file here' }
            : {
                icon: <CloudUploadOutlined />,
                title: 'Upload files',
                description: 'Click or drag files to this area to upload',
              }
        }
      />
    </Sender.Header>
  );

  return (
    <>
      {/* 提示词列表 */}
      {/* <Prompts items={senderPromptsItems} onItemClick={onPromptsItemClick} /> */}
      {/* 输入框主体 */}
      <Sender
        value={content}
        header={senderHeader}
        onSubmit={onSubmit}
        onChange={onChange}
        prefix={attachmentsNode}
        loading={loading}
        className={className}
      />
    </>
  );
}; 